import React, { useEffect } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '@/pages/OnboardAndLeave/AdjustPost/Add/Wrap.less';
import { Card, Col, Form, Row, Spin } from 'antd';
import { connect } from 'umi';
import { readStatusMap, useSetReadStatus } from '@/hooks/useSetReadStatus';

import FormList from '../components/JsonToForm';
import style from './index.less';
import Step from '../components/Step';

const Detail = ({ dispatch, flowMyAudited, location, form, loading }) => {
    const listLoading = loading;
    const { taskId, processInstanceName, processInstanceId } = location.query;
    const { detailData, processList } = flowMyAudited;
    const { formList, formValueMap } = detailData;

    useSetReadStatus({ id: processInstanceId, type: readStatusMap.APPLY });

    const fetchDetail = () => {
        const params = { taskId };
        dispatch({
            type: 'flowMyAudited/fetchDetail',
            payload: params
        });
    };
    // 审批流程节点
    const fetchProcessList = () => {
        const params = {
            processInstanceId
        };
        dispatch({
            type: 'flowMyAudited/fetchProcess',
            payload: params
        });
    };
    const onHandleChange = () => {
        console.log('sssssss');
    };
    useEffect(() => {
        // 页面首次加载先清空models数据
        dispatch({
            type: 'flowMyAudited/save',
            payload: {
                processList: [],
                detailData: {}
            }
        });
        fetchDetail();
        fetchProcessList();
    }, []);

    // 页面卸载时清空数据
    useEffect(
        () => () => {
            dispatch({
                type: 'flowMyAudited/save',
                payload: {
                    processList: [],
                    detailData: {}
                }
            });
        },
        []
    );
    return (
        <PageHeaderWrapper type="success">
            <Spin spinning={listLoading}>
                <Card>
                    <Row className={styles.titleBox} type="flex">
                        <Col>
                            <h3 className={styles.title}>{processInstanceName}</h3>
                        </Col>
                    </Row>
                    <div className={style.detailCtr}>
                        <FormList
                            form={form}
                            formList={formList}
                            submitBtn="确定"
                            onChange={onHandleChange}
                            formValueMap={formValueMap}
                            approve={processList}
                            status={detailData?.status}
                            processInstanceId={processInstanceId}
                        />
                        <div className={styles.wrap}>
                            <h3 className={styles.title}>审批流程</h3>
                            <Row style={{ marginLeft: 30 }}>
                                <Col offset={3}>
                                    <Step data={processList} />
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Card>
            </Spin>
        </PageHeaderWrapper>
    );
};
export default connect(({ flowMyAudited, loading }) => ({
    flowMyAudited,
    loading: loading.effects['flowMyAudited/fetchDetail']
}))(Form.create()(Detail));
